import React, { useState, useEffect } from 'react';
import { RoomStatusManager } from '../utils/RoomStatusManager';
import type { Room } from '../../../types/room';
import { RoomStatus } from '../../../types/room';
import styles from '../styles/DragStatusNotification.module.css';

interface DragStatusNotificationProps {
  sourceRoom: Room;
  targetRoom: Room;
  sourceDate: string;
  targetDate: string;
  status: RoomStatus;
  isSuccess: boolean;
  onClose: () => void;
}

const DragStatusNotification: React.FC<DragStatusNotificationProps> = ({
  sourceRoom,
  targetRoom,
  sourceDate,
  targetDate,
  status,
  isSuccess,
  onClose,
}) => {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsVisible(false);
      setTimeout(onClose, 300); // 等待动画完成
    }, 3000);

    return () => clearTimeout(timer);
  }, [onClose]);

  const statusConfig = RoomStatusManager.getStatusConfig(status);

  return (
    <div className={`${styles.notification} ${isVisible ? styles.visible : styles.hidden} ${isSuccess ? styles.success : styles.error}`}>
      <div className={styles.header}>
        <div className={styles.icon}>
          {isSuccess ? '✅' : '❌'}
        </div>
        <div className={styles.title}>
          {isSuccess ? '拖拽成功' : '拖拽失败'}
        </div>
        <button className={styles.closeButton} onClick={() => setIsVisible(false)}>
          ×
        </button>
      </div>
      
      <div className={styles.content}>
        <div className={styles.roomInfo}>
          <div className={styles.sourceInfo}>
            <span className={styles.label}>源:</span>
            <span className={styles.roomNumber}>{sourceRoom.roomNumber}</span>
            <span className={styles.date}>{sourceDate}</span>
          </div>
          
          <div className={styles.arrow}>→</div>
          
          <div className={styles.targetInfo}>
            <span className={styles.label}>目标:</span>
            <span className={styles.roomNumber}>{targetRoom.roomNumber}</span>
            <span className={styles.date}>{targetDate}</span>
          </div>
        </div>
        
        <div className={styles.statusInfo}>
          <span className={styles.statusIcon}>{statusConfig.icon}</span>
          <span className={styles.statusLabel}>{statusConfig.label}</span>
        </div>
      </div>
    </div>
  );
};

export default DragStatusNotification;
